<%-- 
    Document   : updateBalance
    Created on : Jul 30, 2015, 7:25:38 PM
    Author     : Vinnu
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Shop Inventory | Customer Balance</title>
        <link type="text/css" rel="stylesheet" href="css/semantic.min.css"/>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/semantic.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.getScript("js/myScript.js");
                $("#customerName").on("input", function() {
                    var keyId = $('#customerName').val();
                    var phoneNumber = $('#mobile');
                    getCustomerNames(keyId, phoneNumber);
                });
            });

        </script>
    </head>
    <body>
        <%@include file="customerMenu.jsp" %>
        <div class="ui one column middle aligned relaxed fitted stackable grid" id="customerBalaceDiv">
            <div class="column">
                <div class="ui form segment">
                    <form method="post" id="balanceForm" action="${pageContext.request.contextPath}/updateBalance">
                        <div class="two fields">
                            <div class="field">
                                <label>Customer Name</label>
                                <div class="ui left icon input">
                                    <input type="text" id="customerName" list="custNames" name="customerName" placeholder="Customer Name"/>
                                    <datalist id="custNames"></datalist>
                                    <i class="user icon"></i>
                                </div>
                            </div>
                            <div class="field">
                                <label>Mobile</label>
                                <div class="ui left icon input">
                                    <input type="number" id="mobile" name="mobile" placeholder="Enter Mobile"/>
                                    <i class="user icon"></i>
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <input type="submit" class="ui blue button" id="balanceSearch" name="updateBalance" value="Get Details"/> 
                            <input type="reset" class="ui green button clear" value="Clear"/>
                        </div> 
                    </form>
                </div>
            </div>
        </div>
        <form method="post" id="balanceUpdateForm" action="${pageContext.request.contextPath}/updateBalance">
            <div class="ui form segment" id="balanceDiv" style="margin-left: 30px; margin-right: 34px;">
                <div class="two fields">
                    <div class="field">
                        <label>Customer Name:-</label>
                        <div class="ui left icon input">
                            <input type="text" id="customerName" readonly="readonly" name="customerName" value="${MapDetails['Name']}" placeholder="Customer Name"/>
                            <i class="location icon"></i>
                        </div>
                    </div>
                    <div class="field">
                        <label>Customer Phone:-</label>
                        <div class="ui left icon input">
                            <input type="number" id="customerPhone" readonly="readonly" name="customerPhone" value="${MapDetails['Mobile']}" placeholder="Customer Mobile"/>
                            <i class="location icon"></i>
                        </div>
                    </div>

                </div>
                <div class="five fields">
                    <div class="field">
                        <label>Total Purchase Amount:-</label>
                        <div class="ui left icon input">
                            <input type="number" id="totalPurchaseAmount" readonly="readonly" name="totalPurchaseAmount" value="${MapDetails['Purchase']}" placeholder="Total Purchase Amount"/>
                            <i class="location icon"></i>
                        </div>
                    </div>
                    <div class="field">
                        <label>Total Paid Amount:-</label>
                        <div class="ui left icon input">
                            <input type="number" id="totalPaidAmount" readonly="readonly" name="totalPaidAmount" placeholder="Total Paid Amount"  value="${MapDetails['Payment']}" />
                            <i class="location icon"></i>
                        </div>
                    </div>
                    <div class="field">
                        <label>Total Balance Amount:-</label>
                        <div class="ui left icon input">
                            <input type="number" id="totalBalance" readonly="readonly" name="totalBalance" placeholder="Total Balance" value="${MapDetails['Balance']}"/>
                            <i class="location icon"></i>
                        </div>
                    </div>
                    <div class="field">
                        <label>Enter Amount:-</label>
                        <div class="ui left icon input">
                            <input type="number" id="updatedAmount" name="updatedAmount" placeholder="Enter Amount"/>
                            <i class="location icon"></i>
                        </div>
                    </div>
                    <div class="field">
                        <input type="submit" class="ui blue button" name="updateBalance" style="margin-left: 20px; margin-top: 20px;" id="updateBalance" value="Update Balance"/>
                    </div>
                </div>
            </div>
            <label>${BalanceStatus}</label>
        </form>

    </body>
</html>

